<template>
  <div id="navigation" ref="element">
    <div class="logo" @click="tohomepage">
      <img src="./../assets/images/logo.png" alt="">
      <h1>航空制造产品质量分析平台</h1>
    </div>
    <ul class="menu">
      <li v-for="item of navData" :key="item.id">
        <router-link tag="a" :to="item.url" target="_blank" :class="{activeA: current === item.id}">
          {{ item.text }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'navigation',
  data () {
    return {
      current: 1,
      navData: [
        {url: '/dataSimulation', icon: 'fa-tachometer', text: '数据仿真', id: 1},
        {url: '/algorithm', icon: 'fa-codepen', text: '单工序质量分析', id: 3},
        {url: '/process', icon: 'fa-joomla', text: '多工序质量分析', id: 2}
      ]
    }
  },
  mounted () {
    this.current = this.$route.meta.id
  },
  methods:{
    tohomepage(){
      location.href="/"
    }
  }
}
</script>

<style lang="scss" scoped>
#navigation {
  padding: 0.1rem 0.4rem;
  width: 100%;
  // background: #0f3d5e;
  background: #000;
  overflow: hidden;
  .logo {
    cursor: pointer;
    float: left;
    img {
      width: 1.3rem;
      height: .8rem;
    }
    h1 {
      color: white;
      font-weight: 700;
      display: inline-block;
      font-size: 0.28rem;
      vertical-align: sub;
      margin-left: 0.2rem;
    }
  }
  .menu {
    float: right;
    font-weight: 600;
    font-size: 0.22rem;
    margin-top: 0.25rem;
    margin-right: 0.5rem;
    li {
      float: left;
      margin-right: 0.8rem;
      a {
        color: #FFFFFF;
        &:hover {
          color: #FFC107;
        }
      }
      .activeA {
        color: #FFC107;
      }
    }
  }
  
}
</style>
